<template>
	<view class="malfunction">
		<u-sticky bgColor="#fff">
			<view class="p-30">
				<u--input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="输入仪器名称，如介质损耗测定仪"
					border="surround" :clearable="true" v-model="form.name" @confirm="getList" @clear="onClear"></u--input>
	<!-- 			<u-tabs v-if="userType == '管理员'" :list="list1" @click="click"
					:activeStyle="{ color: '#3c9cff', fontWeight: 'bold' }"></u-tabs> -->
			</view>
		</u-sticky>
		<view class="p-30 bg-f7f8fa">
			<view v-for="(item, index) in list" :key="index" class="format-item" @click="jumpMalfunction(item)">
				<view class="format-tip" :class="[item.className]">{{ item.statusName }}
				</view>
				<view class="format-content">
					<view class="malfunction-title">
						{{ item.creatName || '我的' }}-故障申请
					</view>
					<u-line dashed></u-line>
					<u-row v-for="(obj, i) in detailList" :key="i"
						customStyle="font-size: 26rpx;color: #333333;padding: 10rpx 0;margin-top: 15rpx">
						<u-col span="3">
							<text class="detail-item-name">{{ obj.name }}:</text>
						</u-col>
						<u-col span="9">
							<view class="text-e">{{ item[obj.key] || item.instrumentsDTO[obj.key] }}</view>
						</u-col>
					</u-row>
					<u-row v-if="item.approverUser"
						customStyle="font-size: 26rpx;color: #333333;padding: 10rpx 0;margin-top: 15rpx">
						<u-col span="3">
							<text class="detail-item-name">处理人:</text>
						</u-col>
						<u-col span="9">
							<view class="text-e">{{ item.approverUser['realName'] }}</view>
						</u-col>
					</u-row>
					<view class="error m-t-20" style="white-space: pre-line;">异常原因: {{ item.description }}</view>
				</view>
				<!-- 				<view class="submit-btn" v-if="activeTab==='我审批的'&&item.approveStatus!=2">
					<u-button type="primary" text="已处理" @click="onSubmit(item)"
						:customStyle="{width: '140rpx',margin: 0}"></u-button>
				</view> -->
			</view>
			<view class="loadmore" v-if="list.length">
				<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
					:nomore-text="nomoreText" />
			</view>
			<u-gap height="120rpx" bgColor="#f7f8fa"></u-gap>
		</view>
		<u-empty v-if="!list.length" marginTop="30rpx" mode="list" icon="/static/null.png">
		</u-empty>
		<!-- 申报需要的按钮 -->
		<!-- 		<view class="btn" @click="addMalfunction" v-if="activeTab==='我的申报'">
			<u-icon name="plus-circle-fill" color="#0e64fe" size="60"></u-icon>
		</view> -->
	</view>
</template>

<script>
	import SetTabBar from '@/mixins/SetTabBar.js'
	export default {
		mixins: [SetTabBar],
		onShow() {
			console.log('刷新')
			this.getList()
			this.getCount()
			// #ifdef MP-WEIXIN
			this.userType = uni.getStorageSync('userType')
			if (this.userType != '管理员') {
				this.setTabBarIndex(2);
				return
			}
			this.setTabBarIndex(3);
			// #endif
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.total > this.form.limit) {
				this.form.limit = this.form.limit + 10
				this.getList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.form.limit = 20
			this.getList()
			this.getCount()
		},
		data() {
			return {
				userType: '',
				form: {
					page: 1,
					limit: 20,
					order: 'desc',
					orderField: `declare_date`,
					name: '',
					// status: '3' ,//0:库里 1:出库 2:返厂 3:异常

				},
				total: 0,
				// 普通员工类型
				type: '1655484487589249025',
				code: '',
				activeTab: '我的申报',
				list1: [{
					name: '我的申报',
					badge: {}
				}, {
					name: '我审批的',
					badge: {}
				}],
				detailList: [{
						name: '申报时间',
						key: 'declareDate'
					},
					{
						name: '故障仪器',
						key: 'name'
					},
					{
						name: '型号规模',
						key: 'modelNumber'
					},
					{
						name: '制造厂商',
						key: 'manufacturer'
					},
				],
				list: [],
			}
		},
		filters: {
			formatStatus(value) {
				if (value == 2) {
					return '已处理'
				}
				return '待处理'
			}
		},
		methods: {
			// 获取小红标数字
			getCount() {
				const list = ['applicant', 'unapprover']
				this.$api.getyMalfunctionCount().then(res => {
					if (res.data) {
						this.list1.forEach((item, index) => {
							if (res.data[list[index]]) {
								item.badge.value = res.data[list[index]]
							} else {
								item.badge.value = 0
							}
						})
					}
				})
			},
			// 清空仪器名称
			onClear() {
				this.form.name = ''
				this.getList()
			},
			// 去详情
			jumpMalfunction({
				id,
				status,
				statusName,
				task
			}) {
				if(task){
					uni.navigateTo({
						url: `/pages/malfunctionAudit/detail?id=${id}&statusName=${statusName}&type=${this.activeTab}&taskId=${task.taskId}&taskName=${task.taskName}`
					})
				}else{
					uni.navigateTo({
						url: `/pages/malfunctionAudit/detail?id=${id}&statusName=${statusName}&type=${this.activeTab}`
					})
				}
				// console.log(task.taskId,statusName)
	
			},
			// 切换tab
			click(e) {
				this.activeTab = e.name
				if (e.name == '我审批的') {
					this.form.type = 2
				} else {
					this.form.type = 1
				}
				this.getList()
			},
			// 处理审核
			onSubmit(item) {
				this.$api.editMalfunction({
					...item,
					approveStatus: 2
				}).then(res => {
					if (res.msg == 'success') {
						uni.showToast({
							title: '处理成功',
						})
						this.getCount()
						this.getList()
					}
				})
			},
			// 获取列表
			async getList() {
				this.status = 'loading';
				const res = await this.$api.getMalfunctionList(this.form)
				// this.list = res.data.list
				this.list = res.data.list.map(item => {
					if (item.task && item.task.taskName) {
						if (item.task.taskName == '故障审批') {
							item.statusName = '待处理'
							item.className = 'bg-f4ad23'
						} else if (item.task.taskName == '故障申报') {
							item.statusName = '已驳回'
							item.className = 'bg-f42323'
						}
						else {
							item.statusName = '已处理'
							item.className = 'bg-09B300'
						}
					} else {
						item.statusName = '已处理'
						item.className = 'bg-09B300'
					}
					return item
				})
				console.log(this.list)
				this.total = res.data.total
				this.status = this.total <= this.form.limit ? 'nomore' : 'loadmore';
				uni.stopPullDownRefresh();
			}

		}
	}
</script>

<style lang="scss" scoped>
	.malfunction {
		.malfunction-title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
			padding-bottom: 20rpx;
		}

		.detail-item {
			font-size: 26rpx;
			color: #333333;
			padding: 6rpx 0;
		}

		.detail-item-name {
			color: #919191;
			padding-right: 30rpx;
		}

		.error {
			color: #666666;
			font-size: 22rpx;
			background: #F7F9FC;
			border-radius: 5rpx;
			padding: 24rpx;
		}

		.btn {
			position: fixed;
			bottom: 280rpx;
			right: 30rpx;
		}

		.submit-btn {
			display: flex;
			justify-content: flex-end;
			padding: 0 20rpx 20rpx 0;
		}
	}
</style>